線上編輯平台

官方提供的開發平台，整合官方範例和其他創作者的程式資源

P5.js Editor

滿主流的開發平台，超級多大神在上面秀作品秀技術XD，版面做的很像藝廊很漂亮~如果使用processing在上面也可以通喔

Openprocessing

1. P5.js Editor

先來看一下P5.js Editor的介面，左邊是程式碼區，右邊是執行結果

左上的區域有執行與暫停的按鈕，把Auto-refresh勾起來的話，每次更新程式就會自動執行

2. Openprocessing

再來是Openprocessing，有提供搜尋作品的功能，還會在discover區時時更新世界各地創作者的美美作品，只要點選左上角的create a sketch按鈕，就可以開始做自己的第一幅作品囉!

在sketch區域中可以選擇只看到代碼區或者只看到執行結果，播放與暫停按鍵在上方中間，右側有些設定可以調整外，如果需要上傳編輯用的圖片，也可以在這邊進行操作喔

如果希望程式與執行結果都可以看到的話，可以點擊書頁形狀的按鈕，這樣就可以開啟左側式程式區，右邊是執行結果的編輯樣式了

小結

以上就是接下來要使用的工具與平台介紹，當然各位如果希望可以有一些snippet或者程式可以上色的話，也可以用vscode開發喔，要看執行結果只要右鍵用live server開啟就好了